@charset "UTF-8";
/* CSS Document */

body{
	background-color: #283222
}


p{
	color: #F4E6AC;
	font-family:"Baskerville";
	font-weight: lighter;
	
}

h1{
	color: #F4E6AC;
	font-family:"Baskerville";
	font-weight:500;
	font-size: 500;
	
}

h2{
	color: #F4E6AC;
	font-family:"Baskerville";
	font-size: 400;
}

h3{
	color: #F4E6AC;
	font-family:"Baskerville";
	font-weight:normal;
	font-weight:300;
}

h4{
	color: #F4E6AC;
	font-family:"Baskerville";
	font-weight: 200;
	background-position: left;
	
}

img {
	background-position: left;
}

#sugar{
	width: 1420px;
	height: 580px;
	align: right;
	background:#000000;
	border: solid 2px #000000;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
	
}

#milk{
	width: 1420px;
	height: 580px;
	align: right;
	background:#93897F;
	border: solid 2px #000000;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
	
}

#alley{
	width: 1420px;
	height: 580px;
	align: right;
	background:#30211A;
	border: solid 2px #000000;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
	
}

#brew{
	width: 1420px;
	height: 480px;
	align: right;
	background:#C0DBBD;
	border: solid 2px #000000;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
	
}

#coffee{
	width: 1420px;
	height: 580px;
	align: right;
	background:#F5F2F0;
	border: solid 2px #000000;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
	
}

#latte{
	width: 1420px;
	height: 580px;
	align: right;
	background:#010101;
	border: solid 2px #000000;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
	
}

.text{
	text-align: right;
	padding-right: 400px;
	padding-top: 20px;
	float: right; 
	font-size: 1000;
}

.text3{
	text-align: right;
	padding-right: 400px;
	padding-top: 20px;
	float: right; 
}

.text4{
	text-align: right;
	padding-right: 400px;
	padding-top: 20px;
	float: right;
}

.text5{
	text-align: right;
	padding-right: 400px;
	padding-top: 20px;
	float: right;
}


.text6{
	text-align: right;
	padding-right: 400px;
	padding-top: 20px;
	float: right;
	color: #4A3E0E
}

.text7{
	text-align: right;
	padding-right: 400px;
	padding-top: 20px;
	float: right;

}

.ingredients{
	color: #F4E6AC;
	font-family:"Baskerville";
	font-size: 300;
}


.textcane{
	text-align: left;
	padding-right: 400px;
	padding-top: 20px;
	float: top;
}

.caneimage{
	align: left;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
}

.pcane{
	align: left;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
	
}

.textboba{
	align: left;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
	
}

.bobaimage{
	align: left;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
}

.pboba{
	align: left;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
	
}

.texttea{
	align: left;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
}

.teaimage{
	align: left;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
}

.ptea{
	align: left;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
}

.textstore{
	align: center;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
}

.text16{
	align: center;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:center;
	display:inline-block;
	
}

.ul{
	align: left;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
	color: #F4E6AC;
	font-family:"Baskerville";
	font-weight: lighter;
	display:inline-block;
}


.puchong{
	align: left;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
	
}

.kota{
	align: left;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float:left;
}


.sugar{
	float:left;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
}


#navi li {
	display:inline-block;
	text-align:center;
	color:#F4E6AC;
	list-style:none;
	padding:20px;
	}